PEQUENO MANUAL SOBRE 
SISTEMAS DE DISENO 
CON FIGMA 


BY TEFFCODE AND PLATZi 


TEFFCODE AND PLATZI 


(9 TEFFCODE 


ANATOMIA DE 
UN SISTEMA. 
DE ОЕМ 


quie, 


[UP 


(9 TEFFCODE 


SISTEMA ^ v 


4 - FUENTE DE 
DE DISENO VERDAD 
l LUGAR EN DONDE 


HAY ¡INFORMACION 
LENGUAJE EN LA QUE PODEMOS 
PERMITE CONFIAR 


COMUNICARNOS 
EN TORNO Α UN 
LENGUAJE VISUAL 


ANATOMIA DE UN 


SISTEMA DE DISENO 


GUIA DE ESTILOS 


91919, 


LIBRERIA DE 
COMPONENTES 


LiBRERIA DE 
PATRONES 


SIS INIS 


% 


< 


BENEFICIOS 


AHORRAR TIEMPO 
CONSISTENCIA 
ORGANIZACION 
FLEXIBILIDAD 
COLABORACION 
ESTANDARIZACION 


(9 TEFFCODE 


NO ES 
TAREA FACIL 
TIENE SENTIDO Si 


СЕ TRABAJA 
¡TERATIVAMENTE 


EN UN PRODUCTO 


(9 TEFFCODE 


ὁ QUIENES LO 
ESTAN HACIENDO ? 


UBER SHOPIFY AIRBNB 


т 


APPLE GOOGLE ATLASSIAN 


SALESFORCE MICROSOFT © 


IBM 


@ TEFFCODE 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


2 COMO CREAR UN 
SISTEMA DE DISENO ὁ 


PROCESOS, PRINCIPIOS Y 


FLUJO DE TRABAJO 


(9 TEFFCODE 


UN SISTEMA DE DISENO 
NO SE CREA PORQUE Si 


NORMALMENTE SURGE 
POR UNA NECESIDAD 


| | 
é POR DONDE COMENZAR А 


CREAR ММ SISTEMA DE DISEÑO ? ) 


CONTEXTS NECESIDADES 


STARTUP CON iTERAR EL 
8 ANOS DE PRODUCTO CON 
DESARROLLO MAS VELOCIDAD Y 

CONSISTENCIA 


(9 TEFFCODE 


а A Е 
ἱνεσκςίς- g 2 ARMAR SRY 
TENCIAS EQUIPO 
κ 

== 
ἌΝ; 
v Пр {Πεκ 
CV iMP@R- EXPLORAR 


TANCIA OTROS SD 


@ TEFFCODE 


5 | 

DEFINIR (225223 

FUNDAMENTO'S | 

VISUALES — 
COMPONENTES 

Оба 
7 
CONSTRUIR ΜΑΝΤΕΝΙ се 


PATRONES MIENTO 


| 
PROCESO A NIVEL DE DISENO 


| VOZ, TONO, 
EVALUACION ^ AMY... ЈЕ 
DEL PRODUCTO /--- EC a 
< 一 


я 
У |) 
COLORES, ве 
ESPACIADOS, DOCUMENTACION Y 
COMPONENTES... MANTENIMIENTO 


FLUJO DE TRABAJO 


SUPONGAMOS QUE TRABAJAMOS CON 
LA METODOLOGIA DESIGN SPRINT 


AJUSTAMO'S EL FLUJO DE 


TRABAJO ል NUESTRAS 
NECESIDADES 


(9 TEFFCODE 


Clm 
PROTOTYPE DOCUMENTACION 


4 = 
y 


PUBLICACION 
ረ ME SIRVE 7 сб 
ош S (пе) CREACION 
4 ი C (#3 
LO use NUEVO Y RESEARCH 


ACTUALIZARLO 


PRINCIPIOS 


_ IDENTIDAD 
ecu O 


ACCESIBLE ¡INTUITIVO 
Te 
CONSISTENTE ADAPTABLE 


NOTAS DE LA CLASE 
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_უუოუჯ„სუუუ33 


NOE ELODIE ფოთი ათა სსს AA ge 
–უეჭბირ_–_...--–-_- — e ——————— იი ον ed 
Ἶ.᾿ρῆα μ.μ... ὓ..---ααααα--------- μ.ο 


TENDENCIA DE DISENO 


NEUBRUTALISM Y 
ROYECTO DEL CURSO 


Р 


3 


(9 TEFFCODE 


NEUBRUTALISM 


AMOR A 
LO FEO PERO А Мі МЕ 
ENCANTA 
me er 


NOTAS DE LA CLASE 
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TALLER CREATIVO: 
NOMBRAMIENTO DE 


NUESTRO SISTEMA 


DE DISENO 


PEPE 


k a Lp 


(3 TEFFCODE 


ESTARA PRESENTE = 
ЕМ LOS PROCESOS 
DE TOKENIZACION GW € 


ረ POR QUE ES IMPORTANTE 
EL NOMBRAMIENTO ὁ 


berg BRINDA iDENTIDAD 
Ὁ У AUTORIDAD, 
REFERENTE DE DISEÑO 


| 
ALGUNAS PAUTAS IMPOR TANTES 


PARA EL NOMBRE 


СУ QUE REFLEJE EL 


DEBE ENTENDERSE PROPOSITO 
INMEDIATAMENTE 


DEBE SER > 


INCLUSIVO 


¡INVOLUCRA ል 
VARIAS PERSONAS 
DEL EQUIPO 


/ 


¡VAMOS Αι TALLER! 


PASO А PASO 


1. ENTENDER LA MARCA 
2. CONOCER REFERENTES 
3. HACER LLUVIA DE iDEAS 
4 HACER VOTACION 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


DESIGN TOKENS: COMO У 
CUANDO USARLOS 


A e іній 


DESIGN TOKENS 


PRIMARY 2 #FFESF1 


SE USAN PARA: COLORES, 
TAMAN®YS, TIPO GR AFIAS, 
OC PACIDADES... 


(9 TEFFCODE 


"LOS TOKENS DE DISENO 
SON SOLO VARIABLES" ES 
COMO DECIR "RESPONSIVE 
DESIGN SON SOLO MEDIA 
QUERIES" 


ረ POR QUE USAR 


DESIGN TOKENS 2 


· COHERENCIA 

• ÚNICA FUENTE DE VERDAD 

, GENERA ORDEN 

· PERMITE COLABORACION 

e CONSISTENCIA 

` PERMITE HACER SEGUIMIENTO 


SISTEMA DE DISENO 


СЕЕ ንን 


PRODUCTO A PRODUCTO B 


ч w 
PRODUCTO B1 
PRODUCTO A1 
PRODUCTO ልን 


TIPOS DE TOKENS 


UNA ARQUITECTURA DE TOKENS 
ROBUSTA У EXTENSIBLE 
DEPENDE DE CUANTOS NIVELES 
DE ABC TRACCION SE TENGAN 


/ 


8 ზ ” 


MAS ESPECIFICO 


, 
, 
• 
« 
- 


BUTTON-CTA-BACKGROUND-COLOR 


a 


CTA-BACKGROUND-COLOR 


^ 


个 


TOKENS GLOBALES 
VALORES PRIMITIVOS 


INDEPENDIENTES DEL CONTEXTO 
HEREDADOS POR OTROS TOKENS 


ЕН 


TOKENS DE ALIAS — > 


SE RELACIONAN CON UN CONTEXTO, 

SON EFECTIVOS CUANDO UN VALOR 
CON UNA SOLA INTENCION 

APARECERA ΕΝ VARIOS LUGARES, 


CTA-BACKGROUUND-COLOUR 
CD 
CE 


| 
TOKENS ESPECIFICOS 


DE COMPONENTES 


SON LA REPRESENTACION DE 
CADA VALOR ASOCIADO A UN 
COMPONENTE 


BUTTON-CTA-BACKGROUND-COLOR 


A 


CTA-BACKGROUND-COLOR 


4 


ዯ 


DESVENTAJA #1 


SE NECESITA UN PROCESO 
SOLIDO Y CONVENCIONES DE 
NOMENCLATURA SOLIDAS 
PARA QUE LAS COSAS ኮሮ SE 
SALGAN DE CONTROL Y NO 
SEA UNA PESADILLA DE 
MANTENER. 


(9 TEFFCODE 


DESVENTAJA #2 


SE REQUIERE UNA GRAN 
INVERSION iNiCiAL, 
UN SISTEMA DE TOKENS 
DEFiCiENTE PUEDE SER 
MAS PERJUDICIAL QUE 
BENEFICIOSO. 


(9 TEFFCODE 


ረ CUANDO DECIDIR 
Si LOS TOKENS SON 
ADECUADOS PARA 
Mi EQUIPO ? 


(9 TEFFCODE 


• PLANEAS ACTUALIZAR EL 
DISENO O HACER UNO NUEVO. 


» TU DISEÑO SE APLICA A MAS 
DE UN PRODUCTO 


e DESEAS MANTENER წ 
ACTUALIZAR ESTILOS 
FACILMENTE EN EL FUTURO: 


NO TIENE MUCHO SENTIDO 
USAR TOKENS Si... 


LOS VALORES 

NO CAMBIARAN МО TIENES UN 
EN 16 2 ANYS SISTEMA DE 
DISENO 


TiPS Si VAS A 


CREAR TOKENS 


REALIZA UN iNVENTARIG. 
DEFINE CRITERIOS Y 
CONVENCIONES DE 
NOMENCLATURA. | 
TEN UN ROL DE GUARDIAN 
0 GUARDIANA 

CUMPLE CON A11Y. 


.. 
ረ COMO FUNCIONAN LOS 


TOKENS EN LA ViDA REAL ? 


LOS PROTAGONISTAS: 


CUS HERRAMIENTAS NECESITAN 
PODER COMUNICARSE 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


TIPO GRAFIA: MEDIDAS 
ESCALAS Y TOKENS 


N 


| 
UNA ESCALA TIPOGRAFICA ES 


ESENCIALMENTE UN RANGO DE 
TAMAN®S DE LETRA DEFINIDOS 
POR UNA PROPORCION 


о ЈУ - 31. 416 pt 


ы D: 232 pt 


»-1Lpt 
a D -19. +16 р? 


“ቅ 
ლ 


(© TEFFCODE 


"1 + • ВАСЕ = 12 РТ 

= » = |. RATIO = 1,618 

3502 | 12X > 49,419 

р А А А x = 19,419 
12 


~ 
E 
+ 
{ 


PROPORCION ,' 
AUREA `” 


(9 TEFFCODE 


PROPORCIONES DE ESCALA 


TIPO GRAFICA COMUNES: 


1,063 -SEGUNDA MENOR 

1,125 - SEGUNDA MAYOR 
1,200 - TERCERA MENOR 

4,250 - TERCERA MAYOR 
1,333- CUAR TA PERFECTA 
1,414- CUAR TA AUMENTADA 
1,500- QUINTA PERFECTA 
4,618 - LA PROPORCION AUREA 


TERCERA: INTERVALO'S QUE SE 


PRODUCEN ENTRE DOS NOTAS 


TERCERA MENOR: | 
CORRESPONDE А LA RELACION 
DE FRECUENCIAS 6:5 


° — 


3 MENTIR 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


COLORES: COMO 
ESCOGERLOS, PSICOLOGIA 
Y Ίσκενς 


Ye 
የፃ m « 
ሙኣ 
a, 


Ye 


| 
PROCESO DE CREACION DE 


UN SISTEMA DE COLORES 


e ORGANIZAR LOS COLORES 
BASE EN GRUPOS. 

e CREAR VARIACIONES DE LOS 
COLORES BASE. 

e DEFINIR CONVENCIONES DE 
NOMENCLATURA. 

е VALIDAR A11Y. 

е ESTABLECER PAUTAS DE USO. 


ORGANIZAR LOS 


COLORES BASE EN 
GRUPOS 


PRIMARIOS 


SECUNDARIOS 


NEUTROS 


SEMANTICO'S 9; 


(9 TEFFCODE 
PSICOLOGIA DEL COLOR 
უი3____333. 


Y, 4 COMO ТЕ 
SIENTES CON ESO ? 


(9 TEFFCODE 


CREAR VARIACIONES DE 
LOS COLORES BASE 


СЕ GENERAN PARA SATISFACER DIFERENTES 
USOS: BACKGROUNDS, TOOLTIPS... 


СЕ ESCOGEN POCOS PARA REDUCIR LA 
CARGA COGNITIVA 


MAS OPCIONES: MAS CARGA COGNITIVA: 


MAS MANTENIMIENTO 


DEFINIR CONVENCIONES 
DE NOMENCLATURA 


DESIGN TOKENS 


PRIMARY-50 PRiMARY-300 PRIMARY-600 
—— — 


я 
1 


\ BASE | 


---. EXTENDIDOS -΄ 


(9 TEFFCODE 


VALIDAR 
FUNCIONALIDAD Y A11Y 


REEMPLAZA LOS / 


COLORES EN TU 
DISENO Y VERIFICA 
Si CUMPLEN EL 
PROPOSITO QUE CUMPLAN LAS 
PAUTAS DE 
CONTRASTE 


ESTABLECER 


PAUTAS DE USO 


г QUE SOMBRA DEBO USAR PARA EL 
TEXTO SECUNDARIO ? 


¿ CUAL DEBERÍA SER ει COLOR DE 
FONDO DE LOS CTA ? 


¿ QUE COLORES SE VAN A UTILIZAR 
EN LOS ELEMENTOS DESHABILITADOS 7 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


ESPACIADO Y 
ELEVACION 


A 


Cr] 
PUEDES USAR DOS | 


TIPOS DE ESCALAS 
DE ESPACIADO'S 


/ N 


ESPACIADO DE ESPACIADO DE 


COMPONENTES LAYOUT 
— œ 
g B £ + 


BREAKPOINTS 


MOBILE: 640 PX 

TABLET: 368 PX 

LAPTOP: 1024 PX 
DESKTOP: 1280 PX 


TAILWIND CSS 


(9 TEFFCODE 


CONSIDERACIONES 
USAR MENOS ESPACIO ENTRE 


COMPONENTES QUE COMPARTEN UNA 
RELACION CERCANA 


O 
C) 


CONSIDERACIONES 


PUEDEN EXISTIR EXCEPCIONES ЕМ 
DONDE МО” HAYA ESPACIADO 


COMO ει TEXTO 
VERTICALMENTE 
CENTRADO EN UNA 
HOLA! Mead 


4 


CONSIDERACIONES 


LAS DIFERENTES PLATAFORMAS 
TIENEN DIFERENTES UNIDADES 
DE MEDIDA 


iOS: PT 
ANDROID. DP 
WEB: PX 


" წ 
ELEVACION 
REPRESENTAMOS LA DISTANCIA 


Y LA JERARQUIA ENTRE 2 
SUPERFICIES EN EL EJE 2 


USAMOS LAS SOMBRAS COMO 
INTENCION VISUAL 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


ICONOS E 
¡LUSTRACIONES 


“ვ 


ICONOS 


AYUDAN A COMPRENDER 
RAPIDA Y CLARAMENTE COMO 
FUNCIONAN LAS COSAS EN 
CADA EXPERIENCIA 


D ፲ B 


CONSIDERACIONES 


AGRUPARLOS: 
FEEDBACK, ARROWS, FILES... 


USARLOS CERCA A UN TEXTE: 
NO PARA REEMPLAZAR PALABRAS 


ESTABLECER PAUTAS: 
TAMAÑOS, DONDE USARLOS... 


ILUSTRACIONES 


AGREGAN iNFORMACION МО 
VERBAL, CONTEXTO Y 
COMPRENSION DE LO QUE SE 
ESTA HACIENDO 


PAN NOS 


CONSIDERACIONES 


e SER CONSISTENTE 

* EVITAR DISTRACCIONES 
“USAR LA MISMA PALETA 

* ACERCARLAS AL MUNDO REAL 
• ESTABLECER PAUTAS 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


ATOMIC DESIGN 


КУ 


(9 TEFFCODE 


BRAD FROST 
ENCONTRO 
INSPIRACION EN LA 

QUIMICA 


(9 TEFFCODE 


40) 
« ATOMOS 
DO 
η ግም ያቸ De 
ORGANISMOS, QUO 
"¡e PLANTILLAS 


– PAGINAS Г.Д 


| 
ATOMOS 


ELEMENTOS DE ¡INTERFAZ QUE 

NO SE PUEDEN DIVIDIR MAS Y 

SIRVEN COMO BLOQUES DE 
CONSTRUCCION 


LABEL 


| 
MOLECULAS 


SON COLECCIONES DE ATOMOS 


QUE FORMAN COMPONENTES DE 
INTERFAZ DE USUARIO 


RELATIVAMENTE SIMPLES 


LABEL 


ORGANISMO’S 


SON COMPONENTES 
RELATIVAMENTE COMPLEJOS 
QUE FORMAN SECCIONES 
DISCRETAS DE UNA iNTERFAZ 


ς 


><) неме Аевит oO 


TEMPLATES 
COLOCAN COMPONENTES DENTRO 
DE UN DISENO Y DEMUESTRAN LA 
ESTRUCTURA DE CONTENIDO 
SUBYACENTE AL DISENO 


ΤΙ 


| 
ΡΑΘΙΝΑς 
APLICAN CONTENIDO REAL A 
LAS PLANTILLAS 


(966. 
WELCOME - 


ESTA GS Mi 

PAGINA Ж 

ү ይፄሀ( νε 
ESTE RÁS mac 


ESUN sopas mi. 


NOTAS DE LA CLASE 


__ 


_უუოუჯ„სუუუ33 


NOE ELODIE ფოთი ათა სსს AA ge 
–უეჭბირ_–_...--–-_- — e ——————— იი ον ed 
Ἶ.᾿ρῆα μ.μ... ὓ..---ααααα--------- μ.ο 


(9 TEFFCODE 


ARQUITECTURA Υ 


AUDITORIA DE 


COMPONENTES 


ARQUITECTURA DE UN 


COMPONENTE 
CARACTERISTICAS 


y 
VARIANTES 


STYLE: FILLED 


ТЕ: LARGE 
Исто 7 
y 
STATE: ACTIVE 


| 
AUDITO'RIA DE 


COMPONENTES 


ESTADO DE LOS COMPONENTES 
CON EL FIN DE: 


° ORDEN DE PRIORIDADES 

° CATEGORIA ATO MICA 

· SU FASE EN DISENO 

· CV FASE EN DESARROLLO 

· SU FASE DE DOCUMENTACION 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


АТФ МО: 
BOTON Y VARIANTES 


“ТӨ 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


MOLECULA: 
CARD RESPONSIVA Y 
VARIANTES 


| 


NOTAS DE LA CLASE 


__ 


_უუოუჯ„სუუუ33 


NOE ELODIE ფოთი ათა სსს AA ge 
–უეჭბირ_–_...--–-_- — e ——————— იი ον ed 
Ἶ.᾿ρῆα μ.μ... ὓ..---ααααα--------- μ.ο 


(9 TEFFCODE 


MOLÉCULA: 
HEADER RESPONSIVO Y 


VARIANTES 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


ORGANISMO. 
HERO Y VARIANTES 


NOTAS DE LA CLASE 


__ 
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PUBLICACION 
DE LIBRERIA 


(9 TEFFCODE 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


TEMPLATE Y 
PAGINA 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


2 COMO VENDER 
Y MEDIR UN SISTEMA 


DE DISENO ? 


VENDER UN 515 ТЕМА DE 
DISENO PODRIA SER LA 
PARTE MAS DiFICiL DEL 


PROCESO 


(9 TEFFCODE 


Rei 
RETURN ON INVESTMENT 


ዒ ፆ 


С = | _ 


O 
C 
O 


000 
000 


NOTAS DE LA CLASE 


__ 
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(9 TEFFCODE 


Mi EXPERIENCIA 
CREANDO UN 
SISTEMA DE DISENO 
EN STARTUP DESDE 
CERO 


NOTAS DE LA CLASE 


__ 


_უუოუჯ„სუუუ33 


NOE ELODIE ფოთი ათა სსს AA ge 
–უეჭბირ_–_...--–-_- — e ——————— იი ον ed 
Ἶ.᾿ρῆα μ.μ... ὓ..---ααααα--------- μ.ο 


